<template>

  <div class="register-page-wrapper">
    <el-icon class="back" @click="onBack">
      <ArrowLeft />
    </el-icon>
    <div class="register-page">
      <img src="@/assets/logo@2x.png" alt="logo" />
      <h2 style="text-align: center">找回密码</h2>
      <div class="register-page-form" v-if="!showSuccess">
        <el-form ref="form" label-width="90" style="width: 62%"  :model="formData" size="large" label-position="top">
          <el-form-item label="郵箱" prop="mail" required>
            <el-input type="text" :max="50" v-model="formData.mail" :min="1" placeholder="邮箱" />
          </el-form-item>
          <el-form-item label-width="0" style="text-align: center">
            <el-button class="buttons-primary" style="margin:10px auto" @click="showSuccess = true">
              下一步
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="send-msg" v-else>
        <p style="text-align: center">邮件已发送!!请及时通过邮件内的提示操作</p>
        <el-button style="margin: 10px auto;margin-top: 30px;display: block">重新发送</el-button>
      </div>
    </div>
  </div>

</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import type { FormInstance } from "element-plus";
import { ArrowLeft } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";

interface FormData {
  mail: string;
}
const form = ref<FormInstance>();
const formData = reactive<FormData>({
  mail: "",
});
const router = useRouter();
const showSuccess = ref(false);
const onBack = ()=> {
  router.back();
}
</script>
<style scoped lang="scss">
@import "@/theme.scss";

.back {
  position: fixed;
  left: 50px;
  top: 30px;
  z-index: 1;
  font-size: 30px;
  color: #525252;
  padding: 8px;
  background-color: rgba(0,0,0,.2);
  border-radius: 50%;
}
.back:hover {
  background-color: rgba(0,0,0,.4);
  cursor: pointer;
  color: #fff;
}
.register-page-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background-color: #fff;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  img {
    width: 400px;
    transform: translateY(30px);
  }
  .register-page {
    transform: translateY(-10vh);
  }
  .register-page-form {
    width: 400px;
    min-height: 100px;
    border: 1px solid #ccc;
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    justify-content: center;
    padding-top: 30px;
    border-radius: 12px;

  }
}
</style>
